<template>
    <div class="flex  items-center mt-3">

        <p id="font" class="text-2xl text-purple-600">

            <router-link to="/">
                Shop
            </router-link>

        </p>

        <!-- 登录之后隐藏的头像 -->
        <div class="flex ml-auto text-white w-10 h-10">
            <div v-if="img" 
            @mouseenter="showSelect = true"  
            >
            <!-- @mouseleave="handleMouseLeave"> -->
                <el-image :src="'/work' + UserInfoObj.faceimg" fit="fill" :lazy="true" class="rounded-full mb-2"  
                @click="handleClickAvatar"></el-image>
            </div>
            
        </div>
        

        <!-- 显示的用户信息 -->
        <div v-if="showSelect" style="position: absolute; z-index: 9999;
        top: 11%; right: 0; width: 200px; background:#f5f5f5; padding: 10px;"
        class="rounded"
        @mouseleave="showSelect = false" >
            <p class="text-pink-400 border-3 border-pink-400 rounded-xl mb-2 z">昵称：{{UserInfoObj.nickname}}</p>
            <p class="text-pink-400 border-3 border-pink-400 rounded-xl mb-2">用户名：{{UserInfoObj.name}}</p>
            <p class="text-pink-400 border-3 border-pink-400 rounded-xl mb-2">QQ号：{{UserInfoObj.qq}}</p>
            <p class="text-pink-400 border-3 border-pink-400 rounded-xl mb-2">登录时间：<span class="text-sm">{{UserInfoObj.date}}</span></p>
            <p class="text-pink-400 border-3 border-pink-400 rounded-xl mb-2">用户等级：{{UserInfoObj.jurisdiction}}</p>
            <button @click="handleLogout" class="bg-pink-500 border-pink-700 text-white px-2 rounded-xl">退出登录</button>           
        </div>



        <span class="text-white" id="font">
            <button v-if="loginTag" @click="userInifFun">登录</button>

        </span>

        <el-drawer title="用户登录、注册" ref="drawerName" v-model="userInif" size="59%"
            style="position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); height: 70%;"
            class=" rounded-3xl rounded-3xl bg-pink-200 border-2 border-pink-500">
            <el-tabs type="card" class="demo-tabs"  v-model="activeName">
                <el-tab-pane label="注册" name="first">
                    <div class="flex justify-center items-center">
                        <div>
                            <span class="text-pink-500 mr-4">账号</span>
                            <input class="text-pink-500" type="text" v-model="username" placeholder="输入字母+数字">
                            <br>
                            <br>
                            <span class="text-pink-500 mr-4">密码</span>
                            <input class="text-pink-500" type="text" v-model="password" placeholder="输入大，小字符和数字">
                            <br>
                            <br>
                            <span class="text-pink-500 mr-4">QQ</span>
                            <input class="text-pink-500" type="text" v-model="qq" placeholder="输入数字">
                        </div>
                        <br>
                    </div>
                    <br>
                    <div class="flex justify-center items-center">
                        <button style="border: 2px solid rgb(244, 229, 116);"
                            class="px-4 bg-pink-400 text-white rounded-3xl"  @click="regist(username,password,qq)">注册、登录</button>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="登录" name="second">
                    <div class="flex justify-center items-center">
                        <div>
                            <span class="text-pink-500 mr-4">账号</span>
                            <input class="text-pink-500" type="text" v-model="username" placeholder="输入字母+数字">
                            <br>
                            <br>
                            <span class="text-pink-500 mr-4">密码</span>
                            <input class="text-pink-500" type="text" v-model="password" placeholder="输入大，小字符和数字">
                        </div>
                        <br>
                    </div>
                    <br>
                    <div class="flex justify-center items-center">
                        <button style="border: 2px solid rgb(242, 121, 230);"
                            class="px-4 bg-purple-400 text-white rounded-3xl" @click="register">注册</button>
                            <!-- jwt失效重新登录 -->
                        <button style="border: 2px solid rgb(242, 121, 230);"
                            class="px-4 ml-4  bg-pink-400 text-white rounded-3xl"
                            @click="handleLogin(username, password)">登录</button>
                    </div>
                </el-tab-pane>
            </el-tabs>


        </el-drawer>


        <div class="flex ml-4 text-white">
            <el-icon>
                <Search />
            </el-icon>
        </div>
        <div class="text-white" id="font">
            <router-link to="/Order">
                查订单
            </router-link>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch ,defineEmits} from "vue";
import {
    getLoginShopping,
    getFromUser,
    getShoppingRegister,
} from '/src/api/goods.js'
import { ElMessageBox } from 'element-plus'
import { router } from '../router/index'

let username = ref('');
// const regex = /^[\u4e00-\u9fa5]*$/;
const regex =  /^[0-9A-Za-z]*$/;
let password = ref();
const regexpwd = /^[0-9A-Za-z]*$/;
let qq = ref();
console.log("数据1");
console.log(qq.value);
const regexQQ = /^[0-9]*$/;

let useLen = 0;
watch(username,(newValue) =>{

    if(!regex.test(newValue)){
        if(newValue.length)
        console.log(newValue);
        username.value = newValue.slice(0,6);
        console.log(username.value);
    }
    useLen = username.value.length
    console.log(useLen);
    if(useLen>20){
        username.value = username.value.slice(0, 20); // 当长度大于6时，将输入值截断为前6个字符
        // console.log("错误");
    }

    //9/2:表示用户输入数据的范围不超过6    
}) 

watch(password,(newValue) =>{
    if(!regexpwd.test(newValue)){
        console.log(newValue);
        password.value = '';
    }
    if(password.value.length>20){
        username.value = username.value.slice(0, 20); // 当长度大于6时，将输入值截断为前6个字符
        // console.log("错误");
    }
}) 

watch(qq,(newValue) =>{
    if(!regexQQ.test(newValue)){
        console.log(newValue);
        qq.value = '';
    }
}) 

  // 通过$emit方法将qq.value作为参数传递给父组件

//为false是不显示
let showSelect = ref(false)
function handleClickAvatar(){
    showSelect.value = !showSelect.value;
    console.log(showSelect.value);
}

function handleLogout(){
    sessionStorage.removeItem('jwtToken');
    location.reload()//页面刷新
}
const activeName = ref('second');
function register() {
    activeName.value = 'first'
    // if(username || password || qq){
    //     alert("输入值为空！")
    // }
    // console.log(activeName.value);
}



//登录
//参数和变量重名
const handleLogin = (usename, password) => {
    getLoginShopping(usename, password)
        .then(res => {
            sessionStorage.setItem('jwtToken', res.data.data)
            // console.log(sessionStorage.getItem('jwtToken'));

            if (res.data.code === 1) {
                // router.push("/");
                window.location.href = '/'

            } else {
                console.log(res);
                ElMessageBox.alert(res.data.data, '登录错误', {
                    confirmButtonText: '确定',
                })
            }
        })
        .catch(err => {
            console.log(err);

        })

}

function regist(username,password,qq){
    getShoppingRegister(username,password,qq)
    .then(res =>{
        console.log(res);
        console.log(res.data.data);
        if(res.data.code === 1 ){
            // router.push("/")
            activeName.value = 'second'
            // window.location.href = '/'
        }else{
                ElMessageBox.alert(res.data.data, '注册错误', {
                    confirmButtonText: '确定',
                })
            }
    })
    .catch(ero =>{
        console.log(ero);
    })

}


const img = ref(true)
if (!sessionStorage.getItem('jwtToken')) {
    img.value = false
}

onMounted(() => {

})

const loginTag = ref(false);
if (!sessionStorage.getItem('jwtToken')) {
    loginTag.value = true;
}


//自定义组件事件父组件向子组件传值,自定义事件用于在注册按钮时候触发
const emit = defineEmits(['loginfun']) //emit是一个函数

//登录之后有了jwt就自动把数据得到
const jwtToken = ref(sessionStorage.getItem('jwtToken'));

let UserInfoObj = ref({})

//jwt过期但还是登录状态，如何解决
console.log(jwtToken.value);//jwt不存在

    getFromUser(jwtToken.value)
    .then(res => {
        UserInfoObj.value = res.data.data
        // 在这个事件中，将qq号作为参数传递给父组件。

        // sessionStorage.setItem('qq',UserInfoObj.qq);
        // const qq = sessionStorage.getItem('qq');


        emit('loginfun',UserInfoObj.value.qq)
        // 必须注册qq号
        // emit('loginfun',UserInfoObj.qq)
    })
    .catch(ero => {
        console.log(ero);
        if(UserInfoObj.value.code == 2){
            sessionStorage.removeItem('jwtToken');
            //恢复登录状态          
        }
    })





//用户没登录时打开登录drawer
let userInif = ref(false)
const userInifFun = () => {
    userInif.value = true

}
</script>
